<template>
	<view>
		<uni-list-view
			:height="scrollHeight"
			url="labor/labor/mian/findPage"
			requestMethod="GET"
			@loadData="loadData"
		>
			<view class="news_wrap">
				<view class="news_item" v-for="(item, index) in newsList" :key="index" @click="routeDetail(item)">
					<image class="_img" mode="aspectFill" src="https://img2.baidu.com/it/u=4134404395,864195599&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666"></image>
					<view class="_status">进行中</view>
					<view class="_content">
						<view class="_title">中国人民解放军是我们和平幸福生活的重要保障，是保卫祖国的钢铁长城，是国家和人民利益的忠实捍卫者</view>
						<view class="_time">2022-03-05 - 2023-05-08</view>
						<view class="_p2">
							<view class="_popular">
								<i class="iconfont icon-renqi"></i>
								<text>350</text>
							</view>
							
							<i class="iconfont icon-fenxiang"></i>
						</view>
					</view>
				</view>
			</view>
		</uni-list-view>
	</view>
</template>

<script>
	import UniListView from "@/components/uni-list-view/index.vue" 
	export default {
		data() {
			return {
				scrollHeight: 0,
				newsList: [],
			}
		},
		components: {
			UniListView
		},
		onLoad() {
			this.getScrollHeight()
		},
		methods: {
			// 计算滚动条的高度
			async getScrollHeight() {
				let sysInfo = await uni.getSystemInfo();
				this.scrollHeight = sysInfo.windowHeight
			},
			
			// 加载新闻资讯数据
			loadData(list) {
				this.newsList = list
			},
			
			// 跳转详情
			routeDetail(item) {
				console.log(item);
				uni.navigateTo({
					url: "/pages/activity/detail"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.news_wrap{
		padding: 30rpx 30rpx 1rpx 30rpx;
	}
	.news_item{
		background: #fff;
		margin-bottom: 30rpx;
		border-radius: 15rpx;
		overflow: hidden;
		box-shadow: 0 0 30rpx rgba(0,0,0,0.2);
		position: relative;
		._img{
			width: 100%;
			height: 500rpx;
			display: block;
		}
		._status{
			position: absolute;
			top: 400rpx;
			right: 30rpx;
			color: $u-primary;
			background: rgba(0,0,0,0.6);
			padding: 10rpx 20rpx;
			border-radius: 20rpx;
			z-index: 2;
		}
		._content{
			padding: 20rpx 20rpx 30rpx 20rpx;
			._title{
				font-size: 30rpx;
				font-weight: bold;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-bottom: 15rpx;
			}
			._time{
				color: #999;
				margin-bottom: 15rpx;
			}
			._p2{
				display: flex;
				align-items: center;
				color: #666;
				._popular{
					display: flex;
					align-items: center;
					margin-right: 50rpx;
				}
				.icon-fenxiang{
					font-size: 34rpx;
				}
			}
		}
	}
</style>
